<template>
  <div class="init-config">
    <Form
      :model="modelForm"
      ref="initConfigForm"
      class="ivu-form-no-margin-bottom"
      :rules="rule"
      :label-width="200"
    >
      <Row :gutter="32">
        <Col span="16">
          <Form-item :label="$t('module.initConfig.projectGroupName')" prop="projectGroupName">
            <Input
              v-model.trim="modelForm.projectGroupName"
              
            ></Input>
          </Form-item>
        </Col>
        <Col span="16">
          <Form-item :label="$t('module.initConfig.projectName')" prop="projectName">
            <Input
              v-model.trim="modelForm.projectName"
              
            ></Input>
          </Form-item>
        </Col>
        <Col span="16">
          <Form-item :label="$t('module.initConfig.versionInfo')" prop="versionMsg">
            <Input
              v-model.trim="modelForm.versionMsg"
              
            ></Input>
          </Form-item>
        </Col>
        <Col span="16">
          <Form-item  :label="$t('module.initConfig.classRootDir')" prop="rootDir">
            <template slot="label">
              <span>{{$t('module.initConfig.classRootDir')}}</span>
              <Tooltip content="多级目录请以\分割，示例：crc\ripples表示crc.ripples" placement="top" max-width="400">
                <Icon type="md-help-circle"/>
              </Tooltip>
            </template>
            <Input
              v-model.trim="modelForm.rootDir"
              
            ></Input>
          </Form-item>
        </Col>
        <Col span="16">
          <Form-item :label="$t('module.initConfig.mainClassName')" prop="mainAppName">

            <Input
              v-model.trim="modelForm.mainAppName"
              
            ></Input>
          </Form-item>
        </Col>
      </Row>
        <Form-item :label="$t('module.initConfig.initProject')">
          <Button type="primary" @click="clickHandle">下载</Button>
        </Form-item>
    </Form>
  </div>
</template>

<script>
import locales from "./locales.js";
import initConfigApi from "@/api/initConfig";

export default {
  name: "index",
  mixins: [locales],
  data() {
    return {
      modelForm: {
        // projectGroupName: '',
        // projectName: '',
        // versionMsg: '',
        // rootDir: '',
        // mainAppName: '',

        "projectGroupName": "",
        "projectName": "",
        "versionMsg": '',
        "rootDir": "",
        "mainAppName": ""
      },
      rule: {
        projectGroupName: [
          { required: true, message: this.$t('module.initConfig.initPlaceholder.projectGroupName'), trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9-._]*$/, message: '只允许输入数字、字母以及 . - _ ', trigger: 'blur' },
        ],
        projectName: [
          { required: true, message: this.$t('module.initConfig.initPlaceholder.projectName'), trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9-._]*$/, message: '只允许输入数字、字母以及 . - _ ', trigger: 'blur' },
        ],
        versionMsg: [
          { required: true, message: this.$t('module.initConfig.initPlaceholder.versionInfo'), trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9-._\\/]*$/, message: '只允许输入数字、字母以及 . - _ \\ /', trigger: 'blur' },
        ],
        rootDir: [
          { required: true, message: this.$t('module.initConfig.initPlaceholder.classRootDir'), trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9-_\\]*$/, message: '只允许输入数字、字母以及 - _ \\', trigger: 'blur' },
        ],
        mainAppName: [
          { required: true, message: this.$t('module.initConfig.initPlaceholder.mainClassName'), trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9_]*$/, message: '只允许输入数字、字母以及 _', trigger: 'blur' },
        ]
      }
    }
  },
  methods: {
    clickHandle() {
      this.$refs.initConfigForm.validate((valid) => {
        if (valid) {
          this.$Spin.show()
          initConfigApi.getInitConfig(this.modelForm).then(res => {
            this.$Spin.hide()
            const fileName = decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1]);
            const a = document.createElement("a");
            const blob = new Blob([res.data], { type: "application/zip" });
            a.href = URL.createObjectURL(blob);
            a.style.display = "none";
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          })
        }
      })
    }
  }
};
</script>

<style scoped lang="less">
.init-config{
  padding-top: 20px;
  // /deep/ .ivu-btn-primary{
  //   background-color: #ff6f4b;
  //   border-color: #ff6f4b;
  // }
}
</style>
